<template>
    <!-- 人物关系图 -->
    <div>
        <div ref="chartDiv" style="width: 100%; height: 1000px"></div>

        <Dialog2 />
    </div>
</template>
<script>
// 引入 ECharts
import * as echarts from "echarts";
import Dialog2 from "@/views/xd/components/dialog/dialog2.vue";
export default {
    name: "ForceGraph",
    components: { Dialog2 },
    data() {
        return {
            dialogShow2: false,
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 你的初始化代码
            const myChart = echarts.init(this.$refs.chartDiv);
            let that = this;
            const graph = {
                nodes: [
                    {
                        name: "王芳",
                        value: [],
                        category: "0",
                        symbolSize: 100,
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "芳华微博",
                        category: "2",
                        value: [],
                        symbolSize: 70,
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "芳知乎",
                        category: "2",
                        symbolSize: 70,
                        value: [],
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "微博1",
                        category: "3",
                        symbolSize: 50,
                        value: [],
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "微博2",
                        category: "3",
                        symbolSize: 50,
                        value: [],
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "微博3",
                        category: "3",
                        symbolSize: 50,
                        value: [],
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "知乎1",
                        category: "3",
                        symbolSize: 50,
                        value: [],
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "知乎2",
                        category: "3",
                        symbolSize: 50,
                        value: [],
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                    {
                        name: "知乎3",
                        category: "3",
                        symbolSize: 50,
                        value: [],
                        tooltip: {
                            formatter: "{b0}:{c0}",
                        },
                    },
                ],
                links: [
                    {
                        source: "王芳",
                        target: "芳华微博",
                    },
                    {
                        source: "王芳",
                        target: "芳知乎",
                    },
                    {
                        source: "芳华微博",
                        target: "微博1",
                    },
                    {
                        source: "芳华微博",
                        target: "微博2",
                    },
                    {
                        source: "芳华微博",
                        target: "微博3",
                    },
                    {
                        source: "芳知乎",
                        target: "知乎1",
                    },
                    {
                        source: "芳知乎",
                        target: "知乎2",
                    },
                    {
                        source: "芳知乎",
                        target: "知乎3",
                    },
                ],
            };
            const defaultCategory = "0";
            const graphTitle = "力导向关系图--实现点击节点展开折叠";
            const currentGraph = {
                nodes: {},
                links: {},
            };
            const nodeMap = {};
            // ...你的 init、append、remove 函数定义
            function init() {
                // 根据定义的常量，产生currentGraph的默认数据
                // 遍历全部nodes和links，产生node映射map
                for (let i = 0; i < graph.nodes.length; i++) {
                    if (graph.nodes[i].category === defaultCategory) {
                        currentGraph.nodes[graph.nodes[i].name] = graph.nodes[i];
                    }
                    nodeMap[graph.nodes[i].name] = graph.nodes[i];
                    nodeMap[graph.nodes[i].name]["links"] = {};
                    nodeMap[graph.nodes[i].name]["nodes"] = {};
                    nodeMap[graph.nodes[i].name]["hasAppend"] = false;
                }
                for (let i = 0; i < graph.links.length; i++) {
                    let link = graph.links[i];
                    if (
                        nodeMap[link.source] !== undefined &&
                        nodeMap[link.target] !== undefined
                    ) {
                        nodeMap[link.source].links[link.target] = link;
                        nodeMap[link.source].nodes[nodeMap[link.target].name] =
                            nodeMap[link.target];
                    }
                }

                for (let i = 0; i < graph.nodes.length; i++) {
                    graph.nodes[i].itemStyle = null;
                    graph.nodes[i].label = {
                        normal: {
                            show: graph.nodes[i].symbolSize > 15,
                        },
                    };
                }
                redrawGraph();
            }
            // 处理点击节点展开
            function append(nodeName) {
                // 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links
                let node = nodeMap[nodeName];
                if (
                    node.hasAppend === true ||
                    Object.keys(node.nodes).length === 0 ||
                    Object.keys(node.links).length === 0
                ) {
                    alert("无法继续展开");
                    // this.dialogShow3 = true;
                    return;
                }
                Object.values(node.nodes).forEach((n) => {
                    currentGraph.nodes[n.name] = n;
                });
                Object.values(node.links).forEach((l) => {
                    currentGraph.links[l.source + "_" + l.target] = l;
                });
                node.hasAppend = true;
                redrawGraph();
            }
            // 处理点击节点收缩
            function remove(nodeName) {
                //根据nodeName从nodeMap里拿出对应的nodes和links，从currentGraph.nodes currentGraph.links删除当前节点的nodes和links并且递归
                let node = nodeMap[nodeName];
                Object.values(node.nodes).forEach((n) => {
                    delete currentGraph.nodes[n.name];
                    if (n.hasAppend === true && Object.keys(n.nodes).length > 0) {
                        remove(n.name);
                    }
                });
                Object.values(node.links).forEach((l) => {
                    delete currentGraph.links[l.source + "_" + l.target];
                });
                // 设置flag 等于false
                node.hasAppend = false;

                redrawGraph();
            }
            // 根据更新后的option重新画图
            function redrawGraph() {
                option.series[0].data = Object.values(currentGraph.nodes);
                option.series[0].links = Object.values(currentGraph.links);
                console.log(option);
                myChart.setOption(option);
            }
            // 定义 option
            const option = {
                title: {
                    text: graphTitle,
                    top: "top",
                    left: "center",
                },
                tooltip: {},
                legend: [],
                animation: false,
                series: [
                    {
                        type: "graph",
                        layout: "force",
                        data: Object.values(currentGraph.nodes),
                        links: Object.values(currentGraph.links),
                        categories: [
                            {
                                name: "0",
                                itemStyle: {
                                    color: "#fe4645",
                                },
                                symbol:
                                    "image://",
                                // areaStyle: {},
                                symbolSize: 20,
                            },
                            {
                                name: "2",
                                itemStyle: {
                                    color: "#fea51d",
                                },
                                symbol:
                                    "image://",
                                symbolSize: 20,
                            },
                            {
                                name: "3",
                                itemStyle: {
                                    color: "#fea51d",
                                },
                                symbol:
                                    "image://",
                                symbolSize: 20,
                            },

                        ],
                        roam: true,
                        focusNodeAdjacency: false,
                        itemStyle: {
                            normal: {
                                borderColor: "#fff",
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: "rgba(0, 0, 0, 0.3)",
                            },
                        },
                        label: {
                            position: "right",
                            formatter: "{b}",
                        },
                        lineStyle: {
                            color: "target",
                            // opacity: 0.6,
                            curveness: 0,
                            // 弯曲
                        },
                        emphasis: {
                            lineStyle: {
                                width: 10,
                            },
                        },
                        force: {
                            layoutAnimation: false,
                            // 斥力
                            repulsion: 3000,
                        },
                    },
                ],
            };
            init();
            myChart.on("click", function (params) {
                if (params.dataType === "node") {
                    const node = nodeMap[params.data.name];
                    if (node.hasAppend === true) {
                        remove(node.name);
                    } else {
                        append(node.name);
                    }
                }
            });
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            // 绑定点击事件
        },
        // ...你的其他函数定义
    },
};
</script>

<style>
/* 你的样式 */
</style>